<html>
    <head>
        <meta charset="utf-8" />
        <link href="http://at.alicdn.com/t/font_449040_jh8m0hfhvmo0f6r.css" type="text/css" rel="stylesheet"></link>        
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="ueditor/ueditor.config.js"></script>
        <script src="ueditor/ueditor.all.js"></script>
        <script src="js/config.js"></script>
        <script src="js/bridge.js"></script>
        <style>
            html,body{
                margin: 0px;
                padding: 0px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                overflow: hidden;
                height: 100%;
                width: 100%;
                user-select: none;
            }
            input{
                margin: 0px;
                padding: 0px;
                height: 24px;
                outline: none;
            }
            .label
            {
                float: left;
                width: 80px;
                text-align: right;
                padding-right: 8px;                
            }
            .inputContainer
            {
                float: left;
                height: 32px;
                padding-top: 3px;
            }
            .formRow
            {
                height: 32px;
                line-height: 32px;
                overflow: hidden;
            }
            #loginBtn
            {
                background-color: rgb(47, 116, 52);
                color: #ffffff;
                width: 80px;
                height: 32px;
                line-height: 32px;
                margin-left: 120px;
                float:left;
                text-align:center;
                border-radius: 6px;
                cursor: pointer;
            }
            .btn{
                background: rgb(94, 185, 94);
                height: 28px;
                line-height: 28px;
                border-radius: 3px;
                border: 1px solid #ffffff;
                margin-top: 12px;
                text-align: center;
                width: 146px;
                font-size: 13px;
                cursor: pointer;
            }
            #edui1{
                width: 100%;
            }
            iframe{
                width:100%;
                height:100%;
                border:none;
            }
            .pager{
                position: absolute;
                height: 60px;
                border-radius: 30px;
                cursor: pointer;
                background: rgba(95,143,220,0.3);
                width:60px;
            }
            #closePager{
                right: 0px;
                top: 0px;
                margin-top: -30px;
                margin-right: -29px;
            }
            #rightPager{
                right: 0px;
                bottom: 0px;
                margin-bottom: -30px;
                margin-right: -29px;
            }
            #leftPager{
                bottom: 0px;
                margin-bottom: -30px;
                margin-left: -30px;
            }
            .titleRow{
                line-height: 32px;
                height: 32px;
                border-bottom: dotted 1px #aaaaaa;
                overflow: hidden;
                text-align: left;
                font-size: 14px;
                cursor: pointer;
            }
            #articleListContainer{
                width: 100%;height: 100%;overflow: hidden;
            }
            #articleListBg{
                background: rgba(0, 0, 0, 0.6);position: absolute;top: 0px;left:0px;right: 0px;
                bottom: 0px;z-index: 99999;text-align:center;
            }
            .rowIndex{
                float: left;
                width: 28px;
                text-align: center;
            }
            .infoBox{
                margin-top: 12px;border:1px solid #FFFFFF;width: 140px;
                border-radius: 3px;
                line-height: 22px;text-align: left;padding-left: 6px;
            }
            .infoBox img{
                width: 134px;height: 134px;margin-bottom: 6px;
            }
        </style>
    </head>
    <body>
        <div id="rightContainer" style="width: 25px;background:rgb(95,143,220);z-index: 9999;
        position: absolute;right: 0px;top: 50%;height:550px;margin-top: -275px;
        box-shadow: -3px 0px 6px #BBBBBB;font-size: 10px;overflow: hidden;
        border-bottom-left-radius: 18px;color: #ffffff;text-align: center;
        border-top-left-radius: 18px;">
            <div style="float: left;width: 26px;line-height: 550px;">
                <i style="font-size: 12px;" class="iconfont icon-directionleft"></i>
            </div>
            <div style="margin-left: 26px;height: 100%;">
                <div id="getListBtn" class="btn">
                    文章列表
                </div>
                <div id="newBtn" class="btn">
                    新增文章
                </div>
                <div id="saveBtn" class="btn" style="background: rgb(217,118,52)">
                    保存文章
                </div>
                <div class="infoBox">
                    说明：<br />
                    不会收集您的任何个人数据；                    
                </div>
                <div class="infoBox">
                    赞助作者(支付宝)：<br />
                    <img src="img/alipay.png" />
                </div>
                <div class="infoBox">
                    赞助作者(微信)：<br />
                    <img src="img/wechat.png" />
                </div>
            </div>
        </div>
        <div style="margin-right: 33px">
            <div style="height: 40px;line-height: 40px;">
                <input id="titleInput" type="text" placeholder="请在这里填写文章标题..."
                style="border: none;height: 40px;line-height: 40px;width: 100%;
                text-align: center;font-size: 18px;" />
            </div>
            <div id="editor" style="background: #FFFFFF;margin-left: 6px;height: 560px;">
                <script id="ueditor" type="text/plain" style="width:100%;height:100%;"></script>                    
            </div>
        </div>
        <div id="articleListBg">
            <div style="font-size: 58px;text-align: center;margin-top: 198px;color: #ffffff;font-weight: bold;">
                请稍后...
            </div>
            <div id="articleListWrapper" style="left: 180px;right: 180px;background:#ffffff;overflow: hidden;display: none;
            border-radius: 6px;position:absolute;top: 50%;height: 530px;margin-top: -265px;">
                <div id="articleListContainer">
                    <div style="float: left;width: 50%;margin-left: -1px;border-right: dotted 1px #aaaaaa;height: 100%;">
                        <div id="articleLeft" style="margin: 16px;">

                        </div>
                    </div>
                    <div style="margin-left: 50%;height: 100%;">
                        <div id="articleRight" style="margin: 16px;">

                        </div>
                    </div>
                </div>
                <div class="pager" id="rightPager">                   
                </div>
                <div class="pager" id="leftPager">                    
                </div>
                <div class="pager" id="closePager">
                </div>
            </div>
        </div>
        <script>
            document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} 
            var win = nw.Window.get();
            win.on("resize",function(w,h){
                $("#editor").height(h-40);
                UE.getEditor('editor').setHeight(h-106);
            });
            //todo:pacage.json里应该留下安装superagent的配置项 -save
            $(function(){
                $("#rightContainer").mouseenter(function(){
                    $("#rightContainer")
                        .animate({"width":"188px"},"fast")
                        .find("i")
                        .toggleClass("icon-directionleft")
                        .toggleClass("icon-direction");
                }).mouseleave(function(){
                    $("#rightContainer")
                        .animate({"width":"26px"},"fast")
                        .find("i")
                        .toggleClass("icon-directionleft")
                        .toggleClass("icon-direction");
                });
                $("#getListBtn").click(function(){
                    bky.getList(bky.pageIndex);
                });
                $("#rightPager").click(function(){
                    bky.getList(bky.pageIndex+1);
                })
                $("#leftPager").click(function(){
                    if(bky.pageIndex-1<1){
                        return;
                    }
                    bky.getList(bky.pageIndex-1);
                })
                $("#closePager").click(function(){
                    $("#articleListBg").hide();
                })
                $("#saveBtn").click(bky.saveArticle);
                $("#newBtn").click(bky.newArticle);
                var ue = UE.getEditor('editor');
                ue.ready(function() {
                    ue.setHeight(win.height-156);
                    document.getElementById("ueditor_0")
                        .contentWindow
                        .addEventListener("paste",function(event){
                            bky.uploadImg(event,function(html){
                                ue.execCommand('insertHtml', html);
                            })
                        });
                    // document.getElementById("ueditor_0").contentWindow.onkeydown = function (e) {
                    //     if(e.ctrlKey && e.keyCode == 86){
                    //         var html = bky.ctrl_v(e);
                    //         ue.execCommand('insertHtml', html);
                    //     }
                    // };
                });
            })
        </script>
    </body>
</html>